<template>
    <div class="house-order">
        <div class="house-addr">
            <img src="https://cxj.szzkba.cn/upload/i/2024/07/25/140101.png" class="line" alt="">
            <div class="flex-a" @click="jumpTo('/packageA/pages/addressList/index?type=house')">
                <div class="addr-left" v-if="address.ID">
                    <div class="name flex-a">
                        <span>{{ address.userName }}</span>
                        <span>{{ address.userPhone }}</span>
                    </div>
                    <div class="addr">
                        地址：{{ address.userAddress + address.userAddressInit }}
                    </div>
                </div>
                <div v-else class="addr-left">请选择地址</div>
                <Right color="#333" size="12" />
            </div>
        </div>
        <div class="house-item flex-a flex-b">
            <div class="left">服务人员</div>
            <div class="right flex-a flex-b">
                <span>请选择服务人员</span>
                <Right color="#333" size="12" />
            </div>
        </div>
        <div class="house-item flex-a flex-b">
            <div class="left">服务项目</div>
            <div class="right flex-a flex-b">
                <span>请选择服务项目</span>
                <Right color="#333" size="12" />
            </div>
        </div>
        <div class="house-item flex-a flex-b">
            <div class="left">预约时间</div>
            <div class="right flex-a flex-b">
                <span>请选择预约上门时间</span>
                <Right color="#333" size="12" />
            </div>
        </div>
        <div class="house-item flex-a flex-b">
            <div class="left">联系人</div>
            <div class="right flex-a flex-b">
                <span>请输入联系人姓名</span>
            </div>
        </div>
        <div class="house-item flex-a flex-b">
            <div class="left">手机号码</div>
            <div class="right flex-a flex-b">
                <span>请输入联系人手机号码</span>
            </div>
        </div>
        <div class="house-item flex-a flex-b">
            <div class="left">服务地址</div>
            <div class="right flex-a flex-b">
                <span>请输入详细服务地址</span>
            </div>
        </div>
        <div class="remark flex">
            <span>备注：</span>
            <nut-textarea v-model="remark" placeholder="请输入备注" />
        </div>
        <nut-button color="#21C38F" block>提交预约</nut-button>
        <nut-popup v-model:visible="showBottom" position="bottom" closeable round :style="{ height: '80%' }">
            <div class="time-box">
                <div class="time-list flex-a">
                    <div :class="tab == index ? 'tab active' : 'tab'" v-for="(item, index) in weekList" :key="index"
                        @click="changeTab(index)">
                        <div class="week">{{ item.week }}</div>
                        <div class="day">{{ item.day }}</div>
                    </div>
                </div>
                <div class="select-time">
                    <div class="title">请选择预约时段</div>
                    <div class="state-list flex-a">
                        <div class="flex-a s1"><span></span>可选</div>
                        <div class="flex-a s2"><span></span>已预约</div>
                        <div class="flex-a s3"><span></span>已选</div>
                    </div>
                    <div class="list">
                        <div :class="active == index ? 'active item' : 'item'" v-for="(item, index) in list"
                            :key="index" @click="changeAct(item, index)">
                            {{ item }}
                        </div>
                    </div>
                </div>
            </div>
            <nut-button color="#21C38F" block style="width: 90%;margin:20rpx auto;">确认选择</nut-button>
        </nut-popup>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { useReachBottom } from '@tarojs/taro';
import { Right } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import dayjs from "dayjs";
import { getAddressList } from '../../../../api/index'
export default {
    components: {
        Right,
    },
    setup() {
        const state = reactive({
            remark: '',
            showBottom: false,
            weekList: [
                {
                    week: '星期四',
                    day: '07月17日'
                },
                {
                    week: '星期四',
                    day: '07月17日'
                },
                {
                    week: '星期四',
                    day: '07月17日'
                },
                {
                    week: '星期四',
                    day: '07月17日'
                },
                {
                    week: '星期四',
                    day: '07月17日'
                }
            ],
            tab: 0,
            list: [],
            ind: 0,
            active: -1,
            time: '',
            date: '',
            week: '',
            addressList: [],
            address: {},
            addressId: '',
        });

        onMounted(() => {
            const router = useRouter();
            if (router.params.addressId) {
                state.addressId = router.params.addressId
                getAddressList().then(response => {
                    if (response.code == 0) {
                        state.addressList = response.data.list
                        response.data.list.forEach(item => {
                            if (item.ID == router.params.addressId) {
                                state.address = item
                            }
                        })
                    }
                })
            }
            Taro.getStorage({
                key: 'user',
                success: function (res) {

                }
            })
            let time = new Date()
            let week = time.getDay()
            let month = time.getMonth() + 1
            let day = time.getDate()
            console.log(week, month, day)
            let weeks = state.weekList
            weeks.forEach((item, index) => {
                item.week = getWeek(week + index) || ''
                item.day = getMonth(index)
            })
            state.weekList = weeks
            getList()
            getNewList()
        })
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path });
        }
        useReachBottom(() => {

        })
        const getMonth = (i) => {
            let time = new Date().getTime()
            let endTime = time + i * 24 * 3600 * 1000
            let endTimes = dayjs(endTime).format('MM月DD日')
            return endTimes
        }
        const getHM = (now, i) => {
            let time = new Date(now).getTime()
            let endTime = time + 1800 * 1000 * i
            let endTimes = dayjs(endTime).format('HH:mm')
            return endTimes
        }
        const getWeek = (n) => {
            if (n > 7) {
                n = n - 7
            }
            if (n == 1) {
                return '星期一'
            } else if (n == 2) {
                return '星期二'
            } else if (n == 3) {
                return '星期三'
            } else if (n == 4) {
                return '星期四'
            } else if (n == 5) {
                return '星期五'
            } else if (n == 6) {
                return '星期六'
            } else if (n == 7) {
                return '星期天'
            }
        }
        const changeTab = (index) => {
            state.tab = index
            state.date = state.weekList[index].day
            state.week = state.weekList[index].week
            if (index == 0) {
                getNewList()
            } else {
                getList()
            }
            // transData()
        }
        const getList = () => {
            let arr = [] as any
            for (var i = 0; i < 48; i++) {
                arr[i] = getHM('2024-01-01 00:00:00', i)
            }
            state.list = arr
        }
        const transData = () => {
            // mitt.emit("time", state.date + ' ' + state.time)
            // mitt.emit("selTime", state.week + ' ' + state.time)
        }
        const getNewList = () => {
            let currTime = getHM(new Date().getTime(), 2)
            console.log(currTime)
            let num = Number(currTime.split(':')[1])
            let n = '', current = ''
            if (num <= 30) {
                n = '30'
                current = Number(currTime.split(':')[0]) + ':' + n
            } else {
                n = '00'
                current = (Number(currTime.split(':')[0]) + 1) + ':' + n
            }
            state.ind = state.list.findIndex((item) => { return item == current })
            state.list = state.list.slice(state.ind, state.list.length)
        }
        const changeAct = (item, index) => {
            state.active = index
            state.time = item
            if (state.tab == 0) {
                state.date = state.weekList[0].day
                state.week = state.weekList[0].week
            }
            // transData()
        }
        return {
            ...toRefs(state), changeTab, getWeek, getMonth, getHM, getNewList, getList, changeAct, transData, jumpTo
        };
    }
};
</script>
<style lang="scss">
.house-order {
    .house-addr {
        position: relative;
        padding: 40rpx 20rpx 50rpx;
        background: #fff;
        margin-bottom: 20rpx;

        .addr-left {
            width: 98%;
        }

        .line {
            width: 100%;
            height: 20rpx;
            position: absolute;
            left: 0;
            top: 0;
        }

        .name {
            margin-bottom: 10rpx;
        }

        .addr {}
    }

    .house-item {
        padding: 20rpx;
        background: #fff;

        .left {
            width: 35%;
        }

        .right {
            width: 65%;

            span {
                color: #999;
            }
        }
    }

    .remark {
        margin-top: 20rpx;
        background: #fff;
        padding: 20rpx;

        span {
            display: inline-block;
            width: 53%;
        }

        .nut-textarea {
            padding: 0;
        }
    }

    .nut-button {
        width: 94%;
        margin: 20rpx auto;
    }

    .time-box {
        width: 92%;
        margin: 100rpx auto 0;
        border: 1rpx solid #DDDDDD;
        border-radius: 10rpx;

        .time-list {
            display: flex;

            .tab {
                font-size: 24rpx;
                text-align: center;
                flex: 1;
                color: #333;
                padding: 10rpx 0;
                background: #F5F5F5;

                .week {}

                .day {}
            }

            .tab.active {
                background: #fff;
            }
        }

        .select-time {
            padding: 20rpx;

            .title {
                font-weight: bold;
                font-size: 28rpx;
            }

            .state-list {
                margin: 20rpx 0;
                font-size: 24rpx;

                span {
                    display: inline-block;
                    width: 25rpx;
                    height: 25rpx;
                    border-radius: 7rpx;
                    margin-right: 5rpx;
                }

                .flex-a {
                    margin-right: 50rpx;
                }

                .s1 span {
                    border: 1rpx solid #333;
                }

                .s2 span {
                    background: #DDDDDD;
                }

                .s3 span {
                    background: #2AEA95;
                }
            }

            .list {
                .item {
                    border: 1rpx solid #333;
                    color: #333;
                    font-size: 26rpx;
                    border-radius: 50rpx;
                    width: 18%;
                    height: 50rpx;
                    text-align: center;
                    line-height: 50rpx;
                    display: inline-block;
                    box-sizing: border-box;
                    margin: 0 2.5% 20rpx 0;
                }

                .item:nth-child(5n+5) {
                    margin: 0 0 20rpx 0;
                }

                .item.active {
                    background: #2AEA95;
                    border-color: #2AEA95;
                    color: #fff;
                }
            }
        }
    }
}
</style>